本篇介紹 ES2020 (ES11) 提供的 Nullish Coalescing Operator ( ?? 運算子)。

過去的 || 運算子

如果某個值為 null 或 undefined 時，會希望為它設定一個預設值，常見的作法是使用 || 運算子 (邏輯 OR 運算子)。例如：

let user = {
  name: 'Titan',
  age: null,
  description: '',
  isVerify: false,
  loginCount: 0
};

console.log(user.age || 18);
// 18
console.log(user.undefinedValue || 'default');
// default

若是某些值剛好是 falsy 值，這可能會不符合你的預期，因為那些 falsy 對你來說是需要的值，但 || 運算子會因 falsy 值而使用預設值：

let user = {
  name: 'Titan',
  age: null,
  description: '',
  isVerify: false,
  loginCount: 0
};

console.log(user.description || 'Hello World');
// "Hello World"
console.log(user.isVerify || true);
// true
console.log(user.loginCount || 666);
// 666

如果你只想讓 null 或 undefined 的值設定預設值，那 || 運算子不太適用！

這就是本篇介紹的 Nullish Coalescing Operator ( ?? 運算子) 派上用場的時刻！

現代的 ?? 運算子

你可以把 ?? 運算子想成是高配版的 || (我知道這樣講不準確 XD)，?? 運匴子只能將 null 或 undefined 的值設定預設值。

用前面的例子來舉例：

let user = {
  name: 'Titan',
  age: null,
  description: '',
  isVerify: false,
  loginCount: 0
};

console.log(user.age ?? 18);
// 18
console.log(user.undefinedValue ?? 'default');
// default
console.log(user.description ?? 'Hello World');
// ""
console.log(user.isVerify ?? true);
// false
console.log(user.loginCount ?? 666);
// 0

資料來源

• tc39/proposal-nullish-coalescing: Nullish coalescing proposal x ?? y
• ECMAScript feature: Nullish coalescing for JavaScript | 2ality